<template>
  <div class="user">
    <div>
      <router-link :to="{path: '/home/useradd'}" tag="button" class="btn btn-info">添加</router-link>
    </div>
    <table class="table table-bordered tabler-striped table-hover table-condensed">
      <thead>
      <tr>
        <th v-for="item of headtitle">{{item}}</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(user,index) of userList" :key="index">
        <td v-for="item of user" :key="item.id">{{item}}</td>
        <td>
          <button class="	btn btn-info">
            <router-link :to="{path:'/home/edit'}">修改</router-link>
          </button>
          <button class="	btn btn-danger">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'User',
    computed: {
      ...mapState(['userList']),
      headtitle() {
        return Object.keys(this.userList[0])
      }
    },
  }
</script>

<style scoped lang="stylus">

</style>
